<template>
	<view class="search">
		<input class="searchInput" v-model="searchText" />
		<image src="../../static/img/search.png" class="searchIcon" @click="search()"></image>
		<view class="searchHistory" v-if="!show">
			<view class="searchHistoryItem" v-for="(item, index) in searchHistory" :key="index">{{ item }}</view>
		</view>
		<view class="list" v-if="show">
			<view class="item" v-for="(item, index) in list" :key="index" @click="play(index)">{{ item.musicName }}</view>
		</view>
	</view>
</template>

<script>
import { musicSearch } from '@/api/song';
import { pubUrl } from '@/api/http.js';
import store from '@/store/index.js';
import { initAudio } from '@/common/Audio';
export default {
	data() {
		return { show: false, searchHistory: [], searchText: '', list: [] };
	},
	methods: {
		search() {
			if (!this.searchText) {
				//输入为空
				return;
			}
			musicSearch({ str: this.searchText }).then(res => {
				console.log(res);
				this.list = res.data;
				this.show = !this.show;
			});
			// let list = uni.getStorageSync('searchHistory');
			// list.splice(0, 0, this.searchText);
			// uni.setStorageSync('searchHistory', list);
			// this.searchHistory = uni.getStorageSync('searchHistory');
		},
		//添加当前歌曲到播放列表
		play(index) {
			let songLsit = [this.list[index]];
			store.commit('setSongSheetList', songLsit);
			store.commit('setPlayIndex', 0);
			initAudio();
			console.log(store.state.songSheet);
			uni.navigateTo({
				url: '/pages/main/main'
			});
		}
	},

	onLoad() {
		//this.searchHistory = uni.getStorageSync('searchHistory');
	}
};
</script>

<style lang="less" scoped>
.search {
	.searchInput {
		width: calc(90% - 38px);
		border-radius: 15px;
		border: solid 1px #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #000;
		margin: 2px 0;
		margin-left: 10px;
		font-size: 13px;
		padding: 5px;
		margin-top: 5px;
	}
	.searchIcon {
		width: 30px;
		height: 30px;
		position: absolute;
		right: 3px;
		top: 0px;
	}
	.searchHistory {
		display: flex;
		flex-wrap: wrap;
		.searchHistoryItem {
			border-radius: 15px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #f9f9f9;
			padding: 3px 5px;
			background-color: #8a8a8a;
			font-size: 10px;
			margin: 5px;
		}
	}
	.list {
		.item {
			width: calc(100% -20px);
			margin: 10px;
			border-bottom: 1px solid #f9f9f9;
			padding-bottom: 2px;
		}
	}
}
</style>
